<template>
  <div class="subjectDetails">
    <Collapse v-model="foldPanel">
      <Panel name="1">
        详细信息
        <div class="update-info">
          <Button
            size="small"
            type="info"
            @click="updateSubject()">
            编辑
          </Button>
        </div>
        <div slot="content" class="box">

          <div class="collapse-img">

          </div>

          <div class="collapse-details">

          </div>

        </div>
      </Panel>

      <Panel name="2">
        课时列表
        <div slot="content">
          <CourseList v-bind:sid="subjectId"></CourseList>
        </div>
      </Panel>
    </Collapse>
  </div>
</template>

<script>
  import CourseList from "@/components/course/CourseList"

  export default {
    name: "",
    components: {CourseList},
    data() {
      return {
        subjectId: this.$route.query.sid,
        //折叠面板
        foldPanel: ["1", "2"],
        //课程和课程详细信息
        subject: {
          subjectId: "",
          subjectName: "",
          status: "",
          showOrder: "",
          subjectDetails: {
            subjectDetailsId: "",
            subjectId: "",
            subPic: "",
            subTotal: "",
            subScore: "",
            subTeacher: "",
            qqGroup: "",
            subIntroduction: "",
            status: ""
          }
        }
      }
    },
    methods: {
      //编辑按钮
      updateSubject: function () {
        //跳转
        this.$router.push({
          name: "UpdateSubject",
          query: {
            sid: this.subjectId
          }
        });
      },
      //查询课程详细信息
      init: function () {
        this.axios.get(`/course/subject/subject/${this.subjectId}`)
          .then((resp) => {
            if (resp.data.flag) {
              this.subject = resp.data.data
            }
          })
      }
    },
    mounted() {
      this.init()
    }
  }
</script>

<style scoped>
  .subjectDetails {
  }

  .update-info {
    float: right;
    height: 30px;
    margin-right: 10px;
  }

  /*清除浮动*/
  .subjectDetails .box{
    overflow: hidden;
  }
  .collapse-img {
    border:1px solid black;
    float: left;
    width: 300px;
    height: 50px;
  }

  .collapse-details {
    border:1px solid red;
    float: left;
    width: 300px;
    height: 50px;
  }
</style>
